<template>
	<Popup height="726rpx">
		<view class="content">
			<view class="title">
				异常签收确认
			</view>
			<view class="item">
				<view class="name">
					<image src="/static/img/common/required.png" class="required-icon"></image>
					<text>异常签收类型</text>
				</view>
				<view class="radios">
					<RadioComp class="radio-item" :info="item" v-for="item in abnormalTypeList" :key="item.id"
						:nowId="popupInfo.orderStatus" @click="changeAbnormalType(item)"></RadioComp>
				</view>
			</view>
			<view class="item">
				<view class="name">
					<image src="/static/img/common/required.png" class="required-icon"></image>
					<text>备注说明</text>
				</view>
				<view class="reason">
					<textarea class="reason-text" placeholder="请输入备注说明" />
				</view>
			</view>
			<view class="bottom-btns">
				<view class="btn danger" @click="sign(1)">
					取消
				</view>
				<view class="btn primary" @click="sign(2)">
					确定
				</view>
			</view>
		</view>
	</Popup>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue';
	import Popup from '@/components/popup/popup.vue';
	import RadioComp from '@/components/radioComp/radioComp.vue';
	const emits = defineEmits(['btnClick'])
	// 当前弹窗信息
	const popupInfo = reactive({
		orderStatus: '3',
		orderReason: ''
	})
	// 异常签收类型
	const abnormalTypeList = ref([{ projectName: '整车退回', projectId: '3' }, { projectName: '其他', projectId: '4' }])
	// 改变异常签收类型
	const changeAbnormalType = (item) => {
		popupInfo.orderStatus = item.projectId
	}
	// 签收
	const sign = (type) => {
		if (type === 1) {
			emits('btnClick')
		} else {
			emits('btnClick', popupInfo)
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 40rpx 32rpx 68rpx;
	}

	.title {
		padding-bottom: 22rpx;
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
	}

	.item {
		margin-bottom: 32rpx;

		.name {
			display: flex;
			align-items: center;
			margin-bottom: 22rpx;
		}

		.radios {
			display: flex;

			.radio-item {
				margin-right: 44rpx;
			}
		}

		.reason {
			padding: 32rpx 24rpx;
			width: 100%;
			height: 230rpx;
			border-radius: 16rpx;
			background-color: #EFF6FE;
			box-sizing: border-box;
			overflow: hidden;
		}
	}

	.bottom-btns {
		display: flex;

		.btn {
			padding: 22rpx 0rpx;
			font-size: 28rpx;
			line-height: 33rpx;
			text-align: center;
			color: #fff;
			border-radius: 48rpx;
			border: 2rpx solid $primary-color;

			&.danger {
				margin-right: 12rpx;
				width: 226rpx;
				color: $danger-color;
				border-color: $danger-color;
			}

			&.primary {
				flex: 1;
				background-color: $primary-color;
			}
		}
	}
</style>